<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Selectors - Cascading Style Sheets Syntax</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<h1 align="center"><span class="pagetitle">Selectors</span><br>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font></h1>

<div align="center">
<table border=3 cellpadding=5 cellspacing=0><tr>
<td><font size=2><a href="../../index.html">Main Index</a> |
    <a href="../../propindex/font.htm">Property Index</a> |
    <a href="../../supportkey/syntax.htm">CSS Support History</a> |
    <a href="../../../history/browsers.htm">Browser History</a></font></td>
</tr></table>
</div>

<dl>
<dt><big><b class="mainheading">What Is A Selector?</b></big>
    <dd>When a style sheet is abstracted from the document tree it
        applies to (as it is with Embedded and External style sheets),
        a method is needed to connect style statements to items in the
        document tree. In the CSS Rule-Set syntax, a 'Selector' is used
        to specify the portion of the document tree that the style
        declaration that follows will be attached to.
        <br><br>

        A Selector is the portion of a Rule-Set that comes before the style
        Declaration Block embedded within curly braces ('{' and '}'.) Selector
        syntax in CSS2 can look for matches using five different contexts:
        <a href="element.htm">elements</a>,
        <a href="attribute.htm">attributes</a>, <a href="spechtml.htm">special HTML attributes</a>,
        <a href="../pseudo/pseudoclass.htm">Pseudo-Classes</a> and
        <a href="../pseudo/pseudoelement.htm">Pseudo-Elements</a>.
        <br><br>

        The granularity and power that the CSS2 Selector syntax allows gives an
        author tremendous power, but much of this has not been implemented by
        the popular browsers. The Selector syntax specified in CSS1 is the norm,
        but is more limited. Many of the new capabilities in CSS2 help generalize
        the Selector syntax to make it more flexible with non-specific markup
        languages like XML. While the expanded syntax is not yet supported, it
        should not be too long before it is added to CSS-capable browsers.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Syntax</b></big>
<dd>A Selector is composed of a series of one or more selector components
    separated by spaces and/or the "<span class="alert">&gt;</span>" and
    "<span class="alert">+</span>" selector combining symbols.
    The components of a selector are described and linked below.
<dd><b class="selector">Selector Component</b> =
    ("<span class="alert">*</span>" | [<span
    class="alert2">Element Selector</span>])?
    ([<span class="alert2">Attribute Selector</span>] | [<span class="alert2">ID
    Selector</span>] | [<span class="alert2">Class Selector</span>] | [<span
    class="alert2">Pseudo-Class</span>] | [<span class="alert2">Pseudo-Element</span>])*
</dl>

<a name="selectgroup"></a>
<dl>
<dt><big><b class="mainheading">Selector Grouping</b></big>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE3</i></b>|<b class="s">N4</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]
     <dd>A Declaration block may be assigned to multiple Selectors by separating the
         Selectors with commas.
         <div class="example">
         <table>
         <tr><td colspan=5><b class="alert">Example</b></td></tr>
         <tr>
             <td valign=top><b class="selector">h1</b> { <span class="property">color:</span> green }<br>
             <b class="selector">h2</b> { <span class="property">color:</span> green }<br>
             <b class="selector">h3</b> { <span class="property">color:</span> green }</td>
             <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
             <td valign=top><b class="alert2">Becomes =&gt;</b></td>
             <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
             <td valign=top><b class="selector">h1, h2, h3</b> {
             <span class="property">color:</span> green; }</td>
         </tr>
         </table>
         </div>
</dl>

<dl>
<dt><big><b class="mainheading">Selector Types</b></big>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS3</b>] 
    [<b><i class="fs">IE3</i></b>|<b class="s">N4</b>|<b class="s">O3.5</b>]
<dd><table width="90%" border=1 cellspacing=0 cellpadding=3>
    <tr><td colspan=6><b class="subheading">Element Selectors</b></td></tr>
    <tr><td nowrap><a href="element.htm#namespace">Namespace Selector</a></td><td rowspan=6 bgcolor="#808080">&nbsp;</td>
        <td nowrap><span class="alert2">[Prefix]|[Elem1]</span></td>
        <td rowspan=6 bgcolor="#808080">&nbsp;</td><td>Matches Elem1 with the [Prefix] namespace prefix</td></tr>
    <tr><td nowrap><a href="element.htm#universal">Universal Selector</a></td>
        <td nowrap><span class="alert2">"*"</span></td><td>Matches any element</td></tr>
    <tr><td nowrap><a href="element.htm#simple">Simple Element Selector</a></td>
        <td nowrap><span class="alert2">[Elem]</span></td><td>Matches specified Element name</td></tr>
    <tr><td nowrap><a href="element.htm#descendent">Descendent Selectors</a></td>
        <td nowrap><span class="alert2">[Elem1] S+ [Elem2]</span></td><td>Elem1 is the direct or indirect ancestor of Elem2 </td></tr>
    <tr><td nowrap><a href="element.htm#child">Child Selectors</a></td>
        <td nowrap><span class="alert2">[Elem1] "&gt;" [Elem2]</span></td><td>Elem1 is the direct parent of Elem2</td></tr>
    <tr><td nowrap><a href="element.htm#adjacent">Adjacent Selectors</a></td>
        <td nowrap><span class="alert2">[Elem1] "+" [Elem2]</span></td><td>Elem1 and Elem2 share the same
        direct parent AND are next to each other in the document tree</td></tr>

    <tr><td colspan=5><b class="subheading">Attribute Selectors</b></td></tr>
    <tr><td nowrap><a href="attribute.htm#simple">Simple Attribute Selector</a></td>
        <td rowspan=8 bgcolor="#808080">&nbsp;</td>
        <td nowrap><span class="alert2">[Attr]</span> or<br><span class="alert2">Elem[Attr]</span></td>
        <td rowspan=8 bgcolor="#808080">&nbsp;</td>
        <td>Matches all elements with the specified attribute or all 'Elem's with the
            specified attribute</td></tr>
    <tr><td nowrap><a href="attribute.htm#value">Attribute Value Selector</a></td>
        <td nowrap><span class="alert2">[Attr="value"]</span> or<br><span class="alert2">Elem[Attr="value"]</span></td>
        <td>Matches all elements that exactly match the specified attribute/value or all 'Elem's with the
            specified attribute/value</td></tr>
    <tr><td nowrap><a href="attribute.htm#begin">"Begins-with" Attribute Value Selector</a></td>
        <td nowrap><span class="alert2">[Attr^="value"]</span> or<br><span class="alert2">Elem[Attr^="value"]</span></td>
        <td>Matches all elements with the specified attribute that <em><b>BEGIN</b></em> with the
            specified value. This selector would match attribute values that are equal to it as
            well as to longer values of which it is a substring.</td></tr>
    <tr><td nowrap><a href="attribute.htm#end">"Ends-with" Attribute Value Selector</a></td>
        <td nowrap><span class="alert2">[Attr$="value"]</span> or<br><span class="alert2">Elem[Attr$="value"]</span></td>
        <td>Matches all elements with the specified attribute that <em><b>END</b></em> with the
            specified value. This selector would match attribute values that are equal to it as
            well as to longer values of which it is a substring.</td></tr>
    <tr><td nowrap><a href="attribute.htm#substring">Substring-match Attribute Value Selector</a></td>
        <td nowrap><span class="alert2">[Attr*="value"]</span> or<br><span class="alert2">Elem[Attr*="value"]</span></td>
        <td>Matches all element/attribute combinations that have at least one occurrence
            of the indicated value as a substring.</td></tr>
    <tr><td nowrap><a href="attribute.htm#many">One-of-many Attribute<br>Value Selector</a></td>
        <td nowrap><span class="alert2">[Attr~="value"]</span> or<br><span class="alert2">Elem[Attr~="value"]</span></td>
        <td>Allows a portion of an attribute value to be exactly matched where
            the portions are separated by spaces.</td></tr>
    <tr><td nowrap><a href="attribute.htm#hyphen">Hyphen Attribute<br>Value Selector</a></td>
        <td nowrap><span class="alert2">[Attr|="value"]</span> or<br><span class="alert2">Elem[Attr|="value"]</span></td>
        <td>The attribute value is a hyphen-separated list and begins with "value"</td></tr>
    <tr><td nowrap><a href="attribute.htm#namespace">Namespace Attribute Selector</a></td>
        <td nowrap><span class="alert2">[Prefix|Attr="value"]</span>
            or<br><span class="alert2">Elem[Prefix|Attr="value"]</span></td>
        <td>The attribute is in the specified Namespace prefix.</td></tr>

    <tr><td colspan=5><b class="subheading">Special HTML Selectors</b></td></tr>
    <tr><td nowrap><a href="spechtml.htm#class">Class Selector</a></td><td rowspan=2 bgcolor="#808080">&nbsp;</td>
        <td nowrap><span class="alert2">.[Class Name]</span></td><td rowspan=2 bgcolor="#808080">&nbsp;</td><td>Matches elements
            with CLASS attributes carrying a [Class Name] value</td></tr>
    <tr><td nowrap><a href="spechtml.htm#id">ID Selector</a></td>
        <td nowrap><span class="alert2">#[ID Name]</span></td><td>Matches the element carrying the unique ID attribute
            value of [ID Name]</td></tr>

    <tr><td colspan=5><b class="subheading">Pseudo-Class Selectors</b></td></tr>
    <tr><td nowrap><a href="../pseudo/pclasslink.htm">Link</a></td><td rowspan=7 bgcolor="#808080">&nbsp;</td>
        <td nowrap><span class="alert2">A:link</span></td><td rowspan=7 bgcolor="#808080">&nbsp;</td>
        <td>Applies to an unvisited hyperlink</td></tr>
    <tr><td nowrap><a href="../pseudo/pclassvisited.htm">Visited</a></td>
        <td nowrap><span class="alert2">A:visited</span></td><td>Applies to a visited hyperlink</td></tr>
    <tr><td nowrap><a href="../pseudo/pclassfirstchild.htm">First-child</a></td>
        <td nowrap><span class="alert2">[Elem]:first-child</span></td><td>Applies to the first child/descendent of an element</td></tr>
    <tr><td nowrap><a href="../pseudo/pclassactive.htm">Active</a></td>
        <td nowrap><span class="alert2">[Elem]:active</span></td><td>The state during pointer activation (
            eg: press and release of a mouse) </td></tr>
    <tr><td nowrap><a href="../pseudo/pclasshover.htm">Hover</a></td>
        <td nowrap><span class="alert2">[Elem]:hover</span></td><td>The state during pointer movement within the rendering
            region of an element</td></tr>
    <tr><td nowrap><a href="../pseudo/pclassfocus.htm">Focus</a></td>
        <td nowrap><span class="alert2">[Elem]:focus</span></td><td>The state during which an element accepts keyboard input </td></tr>
    <tr><td nowrap><a href="../pseudo/pclasslang.htm">Lang</a></td>
        <td nowrap><span class="alert2">[Elem]:lang([Code])</span></td><td>The selector content
            uses the specified language</td></tr>

    <tr><td colspan=5><b class="subheading">Pseudo-Element Selectors</b></td></tr>
    <tr><td nowrap><a href="../pseudo/pelembefore.htm">Before</a></td>
        <td rowspan=7 bgcolor="#808080">&nbsp;</td>
        <td nowrap><span class="alert2">[Elem]:before</span></td><td rowspan=7 bgcolor="#808080">&nbsp;</td>
        <td>Addresses content that is generated before an element</td></tr>
    <tr><td nowrap><a href="../pseudo/pelemafter.htm">After</a></td>
        <td nowrap><span class="alert2">[Elem]:after</span></td><td>Addresses content that is generated after an element</td></tr>
    <tr><td nowrap><a href="../pseudo/pelemfirstletter.htm">First-letter</a></td>
        <td nowrap><span class="alert2">[Elem]:first-letter</span></td><td>Indicates the first rendered letter/character
            for a block-level element</td></tr>
    <tr><td nowrap><a href="../pseudo/pelemfirstline.htm">First-line</a></td>
        <td nowrap><span class="alert2">[Elem]:first-line</span></td><td>Indicates the first rendered line on the output device
            of a block-level element</td></tr>
</table>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li>Selectors are only case-sensitive if the document language is also
        case-sensitive (eg: HTML: not case-sensitive, XML: case-sensitive)
    <li>ID selectors have a higher cascade specificity than an equivalent
        attribute selector (eg: the selector '#foo' has a higher specificity
        than '*[id="foo"]'
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
            <dd><b class="alert2">3.0:</b>
            <dd>- Unsupported IE3 element names cause problems with selector
                grouping. Style rules will not be applied to any IE3-valid
                element types listed before invalid types. Element types listed
                AFTER the IE3-invalid element type will have CSS rules applied
                appropriately. Suggestion: List IE3-invalid element types FIRST
                in the style grouping.
        </dl>
</ul>

<br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>